<template>
  <div class="userinfo">
    <el-form :model="userlist" label-position="left" label-width="120px">
      <div class="imgbox">
        <Uploadimg uploadtype="adduserimg" ref="childRef" :imgurllist="userlist.imgurl" />
      </div>
      <el-form-item label="账号">
        <el-input v-model="Account" />
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="user_name" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="email" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input-number v-model="age" />
      </el-form-item>
      <el-form-item label="角色身份">
        <el-select v-model="is_admin" disabled placeholder="请选择身份">
          <el-option
            v-for="item in options2"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="sex" placeholder="请选性别">
          <el-option
            v-for="item in options"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
          <!-- <el-option label="女" value="0" />
          <el-option label="男" value="1" /> -->
        </el-select>
      </el-form-item>
      <el-form-item label="注册时间">
        <el-date-picker
          v-model="created_At"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="更新时间">
        <el-date-picker
          v-model="updated_At"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(userlist)">确定修改</el-button>
        <el-button @Click="goback()">取消修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { userStore } from "@/store/modules/user";
import { changuserinfo } from "@/request/user";
import type { FormInstance, FormRules } from "element-plus";
import { getuserlist } from '@/Hook/setuser'
const userdata: any = userStore();
let { userName } = storeToRefs(userdata);
let userlist = reactive({
  Account: "",
  imgurl: "",
  email: "",
  id: "",
  is_admin: "",
  sex: "",
  age: "",
  user_name: "",
  created_At: "",
  updated_At: "",
});
let {
  Account,
  imgurl,
  email,
  id,
  is_admin,
  sex,
  age,
  user_name,
  created_At,
  updated_At,
} = toRefs(userlist);

	// 二：定义与 ref 同名变量
	const childRef = ref <any> ()

userdata.$subscribe((arg, state) => {
  getheaderimg();
});
onMounted(() => {
  getheaderimg();
  // console.log(userName);
});

const getheaderimg = () => {
  let {
    Account,
    picture,
    email,
    id,
    is_admin,
    sex,
    age,
    user_name,
    created_At,
    updated_At,
  } = userName._object.userName;
  userlist.imgurl = picture
    ? "/api/static/" + picture
    : "/api/static/default/default.png";
  userlist.Account = Account;
  userlist.email = email;
  userlist.id = id;
  userlist.is_admin = is_admin;
  userlist.sex = sex;
  userlist.age = age;
  userlist.user_name = user_name;
  userlist.created_At = created_At;
  userlist.updated_At = updated_At;
};

const options = [
  {
    value: 1,
    label: "女",
  },
  {
    value: 2,
    label: "男",
  },
  {
    value: 3,
    label: "保密",
  },
];
const options2 = [
  {
    value: 1,
    label: "管理员",
  },
  {
    value: 2,
    label: "党委",
  },
  {
    value: 3,
    label: "团支书",
  },
  {
    value: 4,
    label: "党员",
  },
  {
    value: 5,
    label: "发展党员",
  },
];

const onSubmit = async (formEl: FormInstance | undefined) => {
  let {
    Account,
    picture,
    email,
    id,
    is_admin,
    sex,
    age,
    user_name,
    created_At,
    updated_At,
  } = formEl;
  // console.log(Account);
  // console.log(formEl);

  // console.log(created_At);
  if (formEl) {
   const aaa=  await childRef.value.uploadimg();
  //  console.log(aaa);
   
    changuserinfo({
      Account,
      picture,
      email,
      id,
      is_admin,
      user_name,
      created_At,
      updated_At,
      sex,
      age,
    }).then((res) => {
      let {code,message} = res;
      if (code==0 || aaa) {
        ElMessage({
            message: '用户数据修改成功',
            type: 'success',
        })
        getuserlist()
      }else{
        ElMessage({
              message: message,
              type: 'error',
          })
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.userinfo {
  width: 700px;
  height: calc(100vh - 140px);
}
</style>
